<template>
  <div :class="['with-navigation-container', metaData.containerClass]">
    <van-nav-bar
      class="hairline-none"
      :title="navigationTitle"
      left-arrow
      :right-text="metaData.navProps?.rightText"
      :right-disabled="metaData.navProps?.rightDisabled"
      @click-left="onGoBack"
    />
    <div class="main-container">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { WithNavigationLayoutMetaData } from '@/types/layout.types.ts'

const route = useRoute()
const router = useRouter()

// 仅仅写出需要的属性，其他的属性请自行补充
const metaData = route.meta as WithNavigationLayoutMetaData

const navigationTitle = computed(() => {
  return metaData.navProps?.title || 'Default Title'
})

const onGoBack = () => {
  router.back()
}
</script>

<style lang="scss" scoped>
.with-navigation-container {
  min-height: 100vh;
  width: 100%;

  .hairline-none {
    &::after {
      border-bottom-width: 0px;
    }
  }

  .main-container {
    height: 100%;
    width: 100%;
  }
}
</style>
